<template>
  <div class="MenPiao">
    <van-nav-bar class="navbar" title="门票" left-text="返回" left-arrow  @click-left="onClickLeft">
      <template #right>
      </template> 
    </van-nav-bar>   
  
     <!-- 筛选 -->
    <div class="shaixuan">
      <div @click="xiaoliang">
        <span>销量</span>
        <van-icon :name="shang" />
      </div>  
      <div @click="jiage">
        <span>价格</span>
        <van-icon :name="jiang" />
      </div> 
      <div>
        <van-cell @click="showPopup">
          <span class="shai">筛选</span>
          <van-icon name="todo-list-o" size="17px"/>          
        </van-cell>
        <van-popup v-model="show" position="right">
          <div>筛选</div>
          <h5>商品分类</h5>
          <div>
            <van-button type="default">大同</van-button>
            <van-button type="default">五台山</van-button>
          </div>
          <h5>状态</h5>
          <div>
            <van-button type="default">推荐</van-button>
            <van-button type="default">促销</van-button>
            <van-button type="default">新品</van-button>
          </div>
          <div>
            <van-button type="default">热门</van-button>
            <van-button type="default">特价</van-button>
            <van-button type="default">独家</van-button>
          </div>
        </van-popup>
      </div> 
    </div>    

  <!-- 列表内容 -->
     <div class="neirong" v-if="mm">
      <div class="ka" v-for="i in mm" :key="i.id">
        <div>
          <img :src="imgBase + i.mp_pic" alt="">
        </div>
        <div>
          <div>{{i.title}}</div>
          <div class="wen">
            <div>
              <h4>￥:{{i.price}}</h4>
              <p>销量:{{i.spec}}</p>
            </div>
            <div class="tubiao">
             <van-icon @click="tiaozhuan(i.lid)" name="cart" color="red" size="35px"/> 
            </div>
            
          </div>
        </div>      
      </div>
   </div>
  
  </div>
</template>

<script>
import KaPian from '@/components/KaPian.vue';
import { mapState } from 'vuex';
  export default {
  components: { KaPian },
    data() {
      return {
        value:'',
        shang:'arrow-up',
        jiang:'arrow-up',
        show:false,
        date: '',
        shijian: false,
        mm:null,
      }
    },

    computed: {
      ...mapState(['imgBase'])
    },

    mounted () {
      this.getMen()
    },

    methods: {
      tiaozhuan(lid){
        this.$router.push({
          path:'/porduct',
          query:{
            id:lid
          }
        })
      },
      getMen(){
        const url=`/menpiao?lid=10`
        this.axios.get(url).then(res=>{
          console.log('res',res)
          this.mm=res.data.result
          // console.log('this.mm',this.mm)
        })
        
      },

      onClickLeft() {
       this.$router.go(-1);
      },
      // 选择时间
      formatDate(date) {
          return `${date.getMonth() + 1}/${date.getDate()}`;
        },
        onConfirm(date) {
          this.shijian = false;
          this.date = this.formatDate(date);
      },
      // 筛选
      xiaoliang() {
        if(this.shang=='arrow-up'){
          this.shang='arrow-down'
        }else{
          this.shang='arrow-up'
        }
      },
      jiage(){
        if(this.jiang=='arrow-up'){
          this.jiang='arrow-down'
        }else{
          this.jiang='arrow-up'
        }
      },
      // 展开弹出层
      showPopup(){
        this.show=true
      }
    },
  }
</script>
<style scoped src='../assets/css/kapian.css'></style>
<style  scoped src='../assets/css/menpiao.css'></style>